<extend name="Index/index" />

<block name="main">
<div class=" banner-buying">
	<div class=" container">
		<h3><span>房源信息</span></h3> 
		<div class="clearfix"> </div>
	</div>
</div>

<div class="container">
	<form action="<{:U('Search/search')}>" method="post">
		<div class="price">
			<div class="price-grid">
				<div class="col-sm-3 price-top">
					<h4>省份</h4>
					<select class="pro in-drop" name="province">
					</select>
				</div>
				<div class="col-sm-3 price-top">
					<h4>城市</h4>
					<select class="city in-drop" name="city">
					</select>
				</div>
				<div class="col-sm-4 price-top">
					<h4>居室</h4>
					<select class="in-drop" name="bed">
						<option value="1">1 居</option>
						<option value="2">2 居</option>
						<option value="3">3 居</option>
					</select>
				</div>
				<div class="col-sm-2 price-top">
					<h4 style='color:#F7F7F7'>立即搜索</h4>
					<input type="submit" class="hvr-sweep-to-right"  value="立即搜索">
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</form>

	<script>
	    //获取省份信息
	    $.ajax({
	        type:'get',
	        url:"<{:U('Search/address')}>",
	        success:function(data){
	            //先清空原先的数据
	            //遍历省份数据
	            console.log(data);
	            for (var i = 0; i < data.length; i++) {
	                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('.pro');
	            }
	        },
	        dataType:'json',
	        async:false,//同步!!!!!!
	    })

	    //绑定事件
	    $('.pro').change(function(){
	        //获取当前的vale值
	        var pid = $(this).val();
	        // 一触发change事件,就清空后面所有的数据
	        	$('.city').show().empty();
	        // 保留$(this)变量
	        var _this = $(this);

	        // 请求下一级数据
	        $.ajax({
	            type:'get',
	            url: "<{:U('Search/address')}>",
	            data:"pid="+pid,
	            success:function(data){
	                // 如果下一级没数据,就隐藏后面的下拉框
	                if (!data) {
	                    _this.nextAll('select').hide();
	                    return;

	                };
	                // console.log(data);
	                // console.log($(this).constructor);
	                // 填充下一级的数据
	                // console.log(data);
	                for (var i = 0; i < data.length; i++) {
	                	// console.log(_this.next('select'));
	                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo($('.city'));
	                }
	                //自动触发后面的select的change事件
	                _this.next('select').trigger('change');
	            },
	            dataType:'json',
	    	})
		})
	    //自动加载省份的change事件
	    $('.pro').trigger('change');
	</script>
</div>

<div class="container">
	<div class="buy-single">
		<div class="box-sin">
			<h4><{$title}></h4>
			<h3>房源基本信息</h3>
			<div class="col-md-9 single-box">
				<div class="box-col">
					<volist name="list" id="v">
					    <div class="col-sm-7 left-side ">
							<a href="single.html">
								<img class="img-responsive" src="__PUBLIC__/Uploads/<{$v.filename3}>">
							</a>
						</div>
						<div class="col-sm-5 middle-side">
						    <h4><{$v.name}></h4>
						    <p><span class="bath5">卧室 </span>: <span class="two"><{$v.beds}></span></p>
						    <p>  <span class="bath5">浴室 </span>: <span class="two"><{$v.toilets}></span></p>
						    <p><span class="bath3">房屋类型</span>: <span class="two"><{$v.type}></span></p>
						    <p><span class="bath5">地址</span>:<span class="two"><{$v.address}></span></p>
							<p><span class="bath3">出租时间</span> : <span class="two"><{$v.months}></span></p>
							<p><span class="bath5">价格</span>:<span class="two">¥<{$v.price}></span></p>				 
							<div class="   right-side">
								  <a href="<{:U('Display/index',array('id'=>$v['id']))}>" class="hvr-sweep-to-right more" >查看详情</a>         
							</div>
						 </div>
				 	<div class="clearfix"> </div>
				 	</volist>
				</div>
			</div>
		</div>
		<div class="col-md-3 map-single-bottom">
			<div class="single-box-right">
		     	<h4>Featured Communities</h4>
				<div class="single-box-img">
					<div class="box-img">
						<a href="<{:U('Display/index',array('id'=>5))}>"><img class="img-responsive" src="__PUBLIC__/Uploads/<{$file[0]}>" alt=""></a>
					</div>
					<div class="box-text">
						<p><a href="single.html">Lorem ipsum dolor sit amet</a></p>
						<a href="single.html" class="in-box">More Info</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="single-box-img">
					<div class="box-img">
						<a href="<{:U('Display/index',array('id'=>6))}>"><img class="img-responsive" src="__PUBLIC__/Uploads/<{$file[1]}>" alt=""></a>
					</div>
					<div class="box-text">
						<p><a href="single.html">Lorem ipsum dolor sit amet</a></p>
						<a href="single.html" class="in-box">More Info</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="single-box-img">
					<div class="box-img">
						<a href="<{:U('Display/index',array('id'=>1))}>"><img class="img-responsive" src="__PUBLIC__/Uploads/<{$file[2]}>" alt=""></a>
					</div>
					<div class="box-text">
						<p><a href="single.html">Lorem ipsum dolor sit amet</a></p>
						<a href="single.html" class="in-box">More Info</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="single-box-img">
					<div class="box-img">
						<a href="<{:U('Display/index',array('id'=>7))}>"><img class="img-responsive" src="__PUBLIC__/Uploads/<{$file[3]}>" alt=""></a>
					</div>
					<div class="box-text">
						<p><a href="single.html">Lorem ipsum dolor sit amet</a></p>
						<a href="single.html" class="in-box">More Info</a>
					</div>
					<div class="clearfix"> </div>
				</div>
		 	</div>
	  	</div>
		<div class="clearfix"> </div>
		<div class="nav-page">
			<nav>
			    <ul class="pagination">
			        <li><{$page}></li>
			    </ul>
	   		</nav>
   		</div>
	</div>
</div>

</block>